<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../assets/css/index.css">
    <title>烈日门店管理系统</title>
</head>
<body>
<div class="authcenter" id="J-authcenter">
    <div class="authcenter-head">
        <div class="container fn-clear">
            <ul class="container-left">
                <li class="container-left-item container-left-first">
                    <a href="javascript:;" class="on">激想云商零售管理</a>
                </li>
            </ul>
            <ul class="container-right">
                <li class="container-right-item"><a href="" target="_blank" title="零售管理首页">零售管理首页</a></li>
                <li class="container-seperator"></li>
                <li class="container-right-item"><a href="" target="_blank" title="云商首页">云商首页</a></li>
            </ul>
        </div>
    </div>
    <!-- authcenter-head-->
    <div class="authcenter-body fn-clear">
        <div class="authcenter-body-login">
            <ul class="ui-nav" id="J-loginMethod-tabs">
                <li class="" data-status="J-qrcode">扫码登录</li>
                <li class="active" data-status="J-login">账密登录</li>
                <br class="clear-float">
            </ul>
            <div class="login login-modern" id="J-login">
                <form name="loginForm" id="login" action="" method="post" class="ui-form">
                    <fieldset>
                        <div class="sl-error" id="J-errorBox">
                            <span class="sl-error-text"></span>
                        </div>
                        <div class="ui-form-item" id="J-username">
                            <label id="J-label-user" class="ui-label" seed="authcenter-switch-account">
                                <span class="ui-icon ui-icon-userDEF"><i class="iconauth"></i></span>
                            </label>
                            <input type="text"
                                   id="J-input-user"
                                   class="ui-input ui-input-normal"
                                   name="logonId"
                                   tabindex="1" value=""
                                   autocomplete="off"
                                   maxlength="100"
                                   placeholder="请输入手机号"
                            >
                            <div class="ui-form-explain"></div>
                        </div>
                        <div class="ui-form-item ui-form-item-20pd" id="J-password">
                            <label id="J-label-editer" class="ui-label" data-desc="登录密码">
                                <span class="ui-icon ui-icon-securityON" id="safeSignCheck">
                                    <i class="iconauth"></i>
                                </span>
                            </label>
                            <span class="alieditContainer" id="password_container">
                                <input type="password" tabindex="2" id="password_rsainput" name="password"
                                       class="ui-input i-text" oncontextmenu="return false" onpaste="return false"
                                       oncopy="return false" oncut="return false" autocomplete="off" value=""
                                       placeholder="请输入密码"></span>
                            <p class="ui-form-other ui-form-other-fg">
                                <a class="textlink forgot"
                                   href="./logonIdInputReset.html"
                                   tabindex="5" seed="authcenter-pwd-forget" target="_blank">忘记登录密码？</a>
                            </p>
                            <div class="ui-form-explain">请输入登录密码</div>
                        </div>
                        <div class="ui-form-item ui-form-item-30pd" id="J-submit">
                            <input type="submit" value="登 录" class="ui-button" id="J-login-btn" tabindex="4">
                            <p class="ui-form-other">
                                <a class="register" href="../register/index.html" target="_blank"
                                   seed="authcenter-register" title="免费注册"
                                   tabindex="6">免费注册</a>
                            </p>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div id="J-qrcode" class="qrcode qrcode-modern fn-hide">
                <span class="qrcode-tips" id="J-qrcode-tips"></span>
                <div class="sl-error" id="J-qrcode-errorBox" errortype="">
                    <span class="sl-error-text"></span>
                </div>
                <div class="qrcode-detail" id="J-qrcode-body">
                    <div class="qrcode-detail-img" id="J-qrcode-img">
                        <div id="J-barcode-container" class="barcode-container">
                            <div class="mask"></div>
                            <canvas width="120" height="120" class="barcode"
                                    style="width: 120px; height: 120px;"></canvas>
                        </div>

                    </div>
                    <div class="qrcode-detail-intro" id="J-qrcode-intro"></div>
                </div>
                <div class="qrcode-footer">
                    <p class="qrcode-footer-tips">请使用手机云商零售管理扫码</p>
                    <p class="qrcode-footer-help">
                        <a href="" title="使用帮助"
                           seed="authcenter-qrcode-gethelp" id="J-qrcode-gethelp" target="_blank">使用帮助</a>
                        <em>|</em>
                        <a href="" title="下载手机云商零售管理" seed="authcenter-qrcode-register"
                           target="_blank">下载手机云商零售管理</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="authcenter-foot" id="J-authcenter-foot">
        <div class="authcenter-foot-container">
            <p class="authcenter-foot-link">
                <a href="">关于激想云商</a> |
                <a href="">关于云商零售管理</a> |
                <a href="">联系我们</a>
            </p>
            <div class="copyright">
                <a href="" target="_blank" seed="copyright-link">沪ICP备15052275号-2</a>
            </div>
        </div>
    </div>
    <!--authcenter-body-->
    <div class="authcenter-background" id="J-authcenter-bg">
        <img id="J-authcenter-bgImg" class="authcenter-bg authcenter-bg-show"
             src="../../assets/images/body_bg1.jpg">
    </div>
</div>
</body>

<!--[if !IE]> -->
<script src="../../assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../../assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="../../assets/js/jquery.validate.min.js"></script>
<script>
    $(function () {
        // 每5秒自动切换背景图片
        var win_height = $(window).height();
        $("#J-authcenter-bg,#J-authcenter-bgImg").css({
            "height": win_height,
            "width": "100%"
        });
        var imgSrcs = ["../../assets/images/body_bg1.jpg", "../../assets/images/body_bg2.jpg", "../../assets/images/body_bg3.jpg"];
        setInterval(function () {
            $("#J-authcenter-bgImg").attr("src", imgSrcs[imgSrcs.push(imgSrcs.shift()) - 1]);
        }, 5000);
        //登陆方式切换
        $("#J-loginMethod-tabs li").click(function () {
            if (!$(this).hasClass("active")) {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
                var data_status = $(this).attr("data-status");
                $("#" + data_status).removeClass("fn-hide");
                $("#" + data_status).siblings("div").addClass("fn-hide");
            }
        });

        //表单验证
        $("#login").validate({
            debug: true,
            errorElement: 'span',
            onfocusout: false,
           /* onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.appendTo($("#J-errorBox .sl-error-text"));
            },
            rules: {
                logonId: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                logonId: {
                    required: "请输入账户名"
                },
                password: {
                    required: "请输入登录密码"
                }
            },
            highlight: function () {
                $("#J-errorBox").addClass('sl-error-display');
            },
            showErrors: function (errorMap, errorList) {
                if (errorList.length) {
                    var s = errorList.shift();
                    var n = [];
                    n.push(s);
                    this.errorList = n;
                } else {
                    $("#J-errorBox").removeClass('sl-error-display');
                }
                this.defaultShowErrors();
            },
            submitHandler: function (form) {
                window.location = "../manager/home.html"
            },
            invalidHandler: function (form) {
            }
        });
    })
</script>
</html>